<template>
  <div>
    <Row>
      <Upload action="" :before-upload="handleBeforeUpload" accept=".xls, .xlsx">
        <Button icon="ios-cloud-upload-outline" :loading="uploadLoading" @click="handleUploadFile">上传文件</Button>
      </Upload>
    </Row>
    <Row>
      <div class="ivu-upload-list-file" v-if="file !== null">
        <Icon type="ios-stats"></Icon>
          {{ file.name }}
        <Icon v-show="showRemoveFile" type="ios-close" class="ivu-upload-list-remove" @click.native="handleRemove()"></Icon>
      </div>
    </Row>
    <Row>
      <transition name="fade">
        <Progress v-if="showProgress" :percent="progressPercent" :stroke-width="2">
          <div v-if="progressPercent == 100">
            <Icon type="ios-checkmark-circle"></Icon>
            <span>成功</span>
          </div>
        </Progress>
      </transition>
    </Row>
    <!-- <Row class="margin-top-10">
      <Table :columns="tableTitle" :data="tableData" :loading="tableLoading"></Table>
    </Row> -->
  </div>
</template>
<script>
import excel from '@/libs/excel'
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'btn-upload',
  props: {
    title: ''
  },
  data () {
    return {
      uploadLoading: false,
      progressPercent: 0,
      showProgress: false,
      showRemoveFile: false,
      file: null,
      // tableData: [],
      // tableTitle: [],
      tableLoading: false
    }
  },
  // computed: {
  //   ...mapState({
  //     saleList: state => state.sales.saleList
  //   })
  // },
  methods: {
    ...mapActions([
      'getSaleUploadList',
      'getSaleRecordUploadList',
      'getSaleTargetUploadList',
      'getRankUploadList',
      'getCustomerUploadList',
      'getStatisticalUploadList',
      'getOperateUploadList',
      'getPerCostUploadList',
      'getBussinessUploadList',
      'getPersonnelUploadList',
      'getEmployeeUploadList',
      'getReportUploadList',
      'getTurnOverUploadList',
      'getDepartmentUploadList',
      'getSystemUserUploadList'
    ]),
    initUpload () {
      this.file = null
      this.showProgress = false
      this.loadingProgress = 0
      // this.tableData = []
      // this.tableTitle = []
    },
    handleUploadFile () {
      this.initUpload()
    },
    handleRemove () {
      this.initUpload()
      this.$Message.info('上传的文件已删除！')
    },
    handleBeforeUpload (file) {
      const fileExt = file.name.split('.').pop().toLocaleLowerCase()
      if (fileExt === 'xlsx' || fileExt === 'xls') {
        this.readFile(file)
        this.file = file
      } else {
        this.$Notice.warning({
          title: '文件类型错误',
          desc: '文件：' + file.name + '不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。'
        })
      }
      return false
    },
    // 读取文件
    readFile (file) {
      const reader = new FileReader()
      reader.readAsArrayBuffer(file)
      reader.onloadstart = e => {
        this.uploadLoading = true
        this.tableLoading = true
        this.showProgress = true
      }
      reader.onprogress = e => {
        this.progressPercent = Math.round(e.loaded / e.total * 100)
      }
      reader.onerror = e => {
        this.$Message.error('文件读取出错')
      }
      reader.onload = e => {
        this.$Message.info('文件读取成功')
        const data = e.target.result
        const { header, results } = excel.read(data, 'array')
        // const tableTitle = header.map(item => { return { title: item, key: item } })
        results.map((item) => {
          if (this.title === '销售管理今日报表') {
            this.getSaleUploadList(item)
          }
          if (this.title === '销售管理统计报表') {
            this.getSaleRecordUploadList(item)
          }
          if (this.title === '销售管理销售目标') {
            this.getSaleTargetUploadList(item)
          }
          if (this.title === '销售管理员工排行') {
            this.getRankUploadList(item)
          }
          if (this.title === '客服管理今日报表') {
            this.getCustomerUploadList(item)
          }
          if (this.title === '客服管理统计报表') {
            this.getStatisticalUploadList(item)
          }
          if (this.title === '运营项目统计表') {
            this.getOperateUploadList(item)
          }
          if (this.title === '客服管理每日成本') {
            this.getPerCostUploadList(item)
          }
          if (this.title === '商务管理今日报表') {
            this.getBussinessUploadList(item)
          }
          if (this.title === '人事管理今日报表') {
            this.getPersonnelUploadList(item)
          }
          if (this.title === '人事管理员工信息') {
            this.getEmployeeUploadList(item)
          }
          if (this.title === '人事管理人事统计') {
            this.getReportUploadList(item)
          }
          if (this.title === '人事管理离职统计') {
            this.getTurnOverUploadList(item)
          }
          if (this.title === '人事管理部门信息') {
            this.getDepartmentUploadList(item)
          }
          if (this.title === '系统管理用户列表') {
            this.getSystemUserUploadList(item)
          }
        })
        // this.tableTitle = tableTitle
        this.uploadLoading = false
        this.tableLoading = false
        this.showRemoveFile = true
      }
    }
  },
  created () {

  },
  mounted () {

  }
}
</script>
